import React from 'react'
import { Col, Thumbnail, Button } from 'react-bootstrap'

class Product extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      buttonStyle: 'info'
    }
  }

  handleClick(e) {
    this.setState({buttonStyle: 'success'})
    this.props.addToCart(this.props.product)
  }

  render () {
    return(
      <Col xs={6} md={4}>
        <Thumbnail src={this.props.product.src} alt="242x200">
          <h3>{this.props.product.name}</h3>
          <p>{this.props.product.intro}</p>
          <p>
            <Button bsStyle={this.state.buttonStyle} onClick={(e)=>{this.handleClick(e)}} block>{'加入购物车 ￥'+this.props.product.price}</Button>
          </p>
        </Thumbnail>
      </Col>
    )
  }
}

export default Product